<template>
	<view style="padding-bottom: 100rpx;">
		<page-head :title="'详情'" :headtype="2"></page-head>
		<view class="jditem marginAuto flex">
			<view class="jditemimg">
				<image :src="apifun.URLimg+datas.img" mode=""></image>
			</view>
			<view class="jditemmsg">
				<view class="jditemmsgname ellipsis01">{{ datas.name }}</view>
				<view class="jditemmsgmoney flex">
					<view class="jditemmsgmoneynum">￥{{ datas.price }}</view>
					<view class="jditemmsgmoneyjian">已减{{ parseFloat(datas.old_price-datas.price).toFixed(2) }}</view>
				</view>
				<view class="jditemmsgy">￥{{ datas.old_price }}</view>
			</view>
		</view>
		<view class="site marginAuto flex" @click="goLocation()">
			<view class="sitel flex">
				<uv-icon style="margin-right: 20rpx;" name="map" size="20" color="#0089FB"></uv-icon>
				<view class="sitelmsg ellipsis01">{{ datas.address }}</view>
			</view>
			<view class="siter flex">
				<view class="siternum mainColor">{{ datas.distance }}</view>
				<view class="siterdh">
					<image :src="apifun.serveimg+'dh.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="xq marginAuto">
			<view class="xqtitle">详情信息</view>
			<view class="xqimg">
				<uv-parse :content="datas.detail"></uv-parse>
			</view>
		</view>
		<view class="signup">
			<view class="signupmain flex marginAuto">
				<view class="signupphone" @click="callphone()">
					<view class="marginAuto" style="width:50rpx">
						<uv-icon class="marginAuto" name="phone" size="20" color="#0089FB"></uv-icon>
					</view>
					<view class="signupphonetxt mainColor">电话</view>
				</view>
				<view class="signupbtn baiColor mainBg" @click="this.apifun.navigate('/pages/learn/signup','kcid='+kcid)">预约学车</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				kcid:'',
				lng:'',
				lat:'',
				datas:{},
			};
		},
		onLoad(option) {
			this.lng = uni.getStorageSync('lng');
			this.lat = uni.getStorageSync('lat');
			this.kcid = option.kcid;
			this.initData()
		},
		onShow() {
			this.getpositionfun();
		},
		methods: {
			initData(){
				let sendData ={
					course_id:this.kcid,
					lng:this.lng,
					lat:this.lat
				}
				this.apifun.unirequest('/api/study/getCourseDetail','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			goLocation(){
				uni.openLocation({
					 latitude: 39.9042, // 目标地点的纬度，浮点数，范围为-90~90
					longitude: 116.4074, // 目标地点的经度，浮点数，范围为-180~180
					scale: 18, // 缩放比例，范围5~18
					success: (res) => {
						
					}
				});
			},
			callphone(){  // 拨打电话
				uni.makePhoneCall({
					phoneNumber: this.datas.tel
				});
			},
			getpositionfun(){  // 获取位置
				uni.getLocation({
					type: 'gcj02',  // wgs84
					success: (res) => {
						let lng = res.longitude;
						let lat = res.latitude;
						this.lng = lng;
						this.lat = lat;
						uni.setStorageSync('lat', lat);
						uni.setStorageSync('lng', lng);
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	// 驾校详情
	.jditem{
		width: 650rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.jditemse{
			width: 30rpx;
			height: 30rpx;
			border-radius:50%;
			margin-right: 20rpx;
			margin-top:55rpx;
			border: 1px solid #EEEEEE;
		}
		.jditemimg{
			width: 140rpx;
			height: 140rpx;
			image{
				width: 140rpx;
				height: 140rpx;
				border-radius:10rpx;
			}
		}
		.jditemmsg{
			width:72%;
			margin-left: 20rpx;
			.jditemmsgname{
				font-size: 30rpx;
				color: #333333;
				line-height: 50rpx;
			}
			.jditemmsgmoney{
				padding: 10rpx 0;
				.jditemmsgmoneynum{
					font-size: 30rpx;
					color: #FC2A2A;
					margin-right: 20rpx;
				}
				.jditemmsgmoneyjian{
					display:inline-block;
					padding: 0 20rpx;
					line-height:40rpx;
					font-size:24rpx;
					color:#FC2A2A;
					background:#FFF0F0;
					border-radius: 4rpx;
				}
			}
			.jditemmsgy{
				font-size: 24rpx;
				color: #999999;
				text-decoration: line-through;
			}
		}
	}
	// 导航
	.site{
		width: 630rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		justify-content: space-between;
		margin-top: 10rpx;
		.sitel{
			width: 70%;
			font-size: 28rpx;
			color: #333333;
			line-height:40rpx;
		}
		.siter{
			.siternum{
				font-size: 28rpx;
				margin-right: 10rpx;
			}
			.siterdh{
				width: 28rpx;
				height: 28rpx;
				image{
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}
	// 详情
	.xq{
		width: 690rpx;
		.xqtitle{
			font-size: 34rpx;
			color: #222222;
			line-height:30rpx;
			margin: 30rpx 0;
			padding-left: 10rpx;
			border-left:5rpx solid #50F9FF;
		}
		.xqimg{}
	}
	// 底部按钮
	.signup{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
		.signupmain{
			width: 90%;
			justify-content: space-between;
			margin-top: 10rpx;
			.signupphone{
				width: 18%;
				.signupphonetxt{
					text-align: center;
					font-size:24rpx;
				}
			}
			.signupbtn{
				border-radius: 100rpx;
				width: 80%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size:36rpx;
			}
		}
	}
</style>